{{ if ! User.BackgroundImage }}
<div class="background-cover"></div>
{{ else }}
<div class="background-cover" id="hasbg">
  <img src="{{ User.BackgroundImage }}" alt="{{ User.Name }}" />
</div>
{{ end }}
<div class="container user">
  <div class="user-avatar" style="background-image: url({{User.Avatar}})">
  </div>
  <div class="user-details">
    <h2>{{ User.Name }}</h2>
    <small> {{ User.Following }} Following | {{ User.MyPixiv }} MyPixiv </small>
    <div class="user-social">
      {{ if User.Webpage }}
      <span
        ><a href="{{ User.Webpage }}"
          ><img src="/assets/globe.png" alt="Webpage" /></a
      ></span>
      {{ end }} {{ range index, item := User.Social }}
      <span>
        <a href="{{ item.url }}">
          <img src="/assets/{{ index }}.svg" alt="{{ index }}" />
        </a>
      </span>
      {{ end }}
    </div>
    <p>{{ raw: parsePixivRedirect(User.Comment) }}</p>
  </div>
  <div class="switcher">
    <div class="switch-title">Category <button id="btn-open-all">Open all artworks</button></div>
    <script>
      document.getElementById('btn-open-all').onclick = () => {
        let xs=document.querySelectorAll('div.artwork-small > a')
        Array.from(xs).map(x=> window.open(x.href))
      }
    </script>
    <a href="/users/{{ User.ID }}/artworks#checkpoint" class="switch-button"
      >All</a
    >
    <a
      href="/users/{{ User.ID }}/illustrations#checkpoint"
      class="switch-button"
      >Illustrations</a
    >
    <a href="/users/{{ User.ID }}/manga#checkpoint" class="switch-button"
      >Mangas</a
    >
    <a href="/users/{{ User.ID }}/bookmarks#checkpoint" class="switch-button"
      >Bookmarks</a
    >
  </div>
  <div>
    <h1 id="checkpoint">Illustrations and Mangas</h1>

    <!-- <div>
                    {{ range User.FrequentTags }}
                    <a href="/tags/{{ .Name }}">
                        <div class="tag-container" style="background-color: {{ randomColor() }}">
                            {{ if ! .TranslatedName }}
                            <div class="main">{{ .Name }}</div>
                            <div class="sub">#</div>
                            {{ else }}
                            <div class="main">{{ .TranslatedName }}</div>
                            <div class="sub">#{{ .Name }}</div>
                            {{ end }}
                        </div>
                    </a>
                    {{ end }}
                </div> -->

    <div class="artwork-container">
      {{ include "components/small-tn" User.Artworks }}
    </div>
  </div>
  <div class="pagination">
    {{ url := "/users/" + User.ID + "/" + Category + "?page="}}
    <small>Page {{ Page }}/{{ PageLimit }}</small>
    <br />
    {{ raw: createPaginator(url, "#checkpoint", Page, PageLimit) }}
  </div>
</div>
